<docs>
  ## 职位模块
</docs>
<template>
  <div>
    <div class="content">
      <!-- <div class="newjob_title clearfix">
        <input type="text" maxlength="64" placeholder="请输入职位、公司名称" ref="searchInput">
        <span class="search" @click="GET_search(1)">搜索</span>
      </div> -->
      <!-- <div class="newjob_num clearfix">
        <span class="job_num">单位数：<span class="job_txt">12</span>家</span>
        <span class="work_num">岗位总人数：<span class="job_txt">999</span>人</span>
      </div> -->
      <div class="newjob">
        <div class="newjob_item" @click="look_inof(item)" v-for="(item, index) in List" :key="index">
          <div>
            <div class="newjob_item_row clearfix">
              <span class="job_name">{{item.gwmc}}</span>
              <span class="job_money" v-show="item.xcfw">
                <span class="num">{{item.xcfw}}</span>/月
              </span>
              <span class="job_money" v-show="!item.xcfw">
                <span class="num">面议</span>
              </span>
            </div>
            <div class="newjob_item_row">
              <span class="job_dwmc">{{item.dwmc}}</span>
            </div>
            <div class="newjob_item_row no_margin">
              <span class="dy dy1">{{item.xlmc}}</span>
              <span class="dy dy2">招聘{{item.rs}}人</span>
              <!-- <span class="dy dy3">双休</span> -->
            </div>
            <div class="bottom_line"></div>
            <div class="newjob_item_row">
              <div class="address overflow">
                {{item.dz}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 上拉刷新 -->
    <pagination-list
      @pullingDown="asyncFetch"
      :no-data="noData"
      class="search-result"
      :ajax-loading="ajaxLoading"
    ></pagination-list>
  </div>
</template>
<script>
import $ from '@/common/js/axios';
import PaginationList from "@/base/paginationList/paginationList";

export default {
  components: {
    PaginationList
  },
  data() {
    return {
      pageSize:"10",
      List:[],
      ajaxLoading:false,
      noData: false,
    };
  },
  methods: {
    //上拉刷新
    asyncFetch(page) {
      this.GET_search(page);
    },
    look_inof(id){
      this.$router.push({ name: "workInfo" , query: { dm:id.tyshxydm,_id:id.gwid } });
    },

    // 获取列表
    GET_search(page = 1) {
      this.ajaxLoading = true;
      this.$loading = true;
      $.get("/rmgw/jltdlbCx", {
        params: { pageSize: this.pageSize, pageNum: page }
      })
        .then(res => {
          const data = res.returnData;
          // 无查询结果
          this.$loading = false;
          if (+data.executeResult === 0) {
            this.noData = true;
            if (page === 1) {
              this.List = [];
            }
          } else {
            if (data.gwlb.length == 0) {
              this.noData = true;
              this.ajaxLoading = true;
            }else{
              this.noData = false;
            }
            // 有数据
            if (page === 1) {
              this.List = data.gwlb;
            } else {
              this.List = this.List.concat(data.gwlb);
            }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
        });
    }
  },
  created() {
    this.GET_search()
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.content{
  padding: $padding-btn $padding 0 $padding;
  color: #074D93;
  .newjob_title{
    font-size: $font-size-large;
    font-weight: 500;
    // height: $font-size-ultra;
    input {
      float: right;
      line-height: $font-size-ultra;
      width:64%;
      padding-left: $padding/2;
      border-radius: $font-size-base;
      background-color: #fff;
      margin-right: $margin-base-half;
    }
    .search{
      float: right;
      margin-top: $padding - $padding-btn;
    }
    .newjob_txt{
      float: left;
      margin-top: $padding - $padding-btn;
    }
  }
  .newjob_num{
    font-weight: 500;
    color: $color-txt;
    font-size: $font-size-small;
    margin-top: $font-size-base;
    margin-bottom: $margin-base-half;
    .job_num{
      float: left;
    }
    .work_num{
      float: right;
    }
  }

   .look_all{
    float: right;
    margin-top: 5px;
    font-size: $font-size-small;
    color:$color-txt;
    font-weight: 400;
    }
  .newjob {
    .newjob_item{
      // height: $height-item;
      background-color: $color-white;
      border-radius:$radius-base2;
      padding-top: $padding;
      box-sizing: border-box;
      margin-bottom: $margin-base;
      .newjob_item_row{
        padding: 0 $padding-btn;
        margin-bottom: $margin-base;
        .job_name{
          color: $color-text-title;
          font-weight:400;
          width: 55%;
          float: left;
        }
        .job_money{
          float: right;
          color:#817E81;
          font-size: $font-size-small;
          width: 45%;
          text-align: right;
          word-wrap: break-word;
          .num{
            color: #FB4D64;
            font-size: $font-size-large;
          }
        }
        .job_dwmc{
          color: $color-txt;
          font-size:$font-size-small;
        }
        .term{
          color: $color-txt;
          font-size:$font-size-small;
          .item {
            box-sizing: border-box;
          }

          .item:after {
            content: '|';
            margin-left: $padding-base-half;
            color: $color-text-placeholder;
          }

          .item:last-child:after {
            content: '';
          }
        }
          @for $i from 0 to 5 {
            .dy#{$i + 1} {
              display: inline-block;
              text-align: center;
              color: $color-white;
              font-size:$font-size-small;
              padding: $padding-base-half;
              border-radius: $radius-base;
              min-width: $height-base;
              box-sizing: border-box;
              line-height: 1;
            }
          }
        .address{
          padding: $padding-btn 0;
          color: $color-text-title;
        }
      }
      .bottom_line{
        display: inline-block;
        height: 2px;
        width: 100%;
        border-top: $border;
      }
      .no_margin{
        margin-bottom: 0;
      }
      .small_margin{
        margin-bottom: $margin-base-half/2;
      }
    }

  }
}

</style>
